<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText" @tap="onreturn()">返回</block>
			<block slot="content">添加商品</block>
		</cu-custom>

		<view class="margin-top">
			<form id="eform">
				<view class="cu-form-group margin-top">
					<view class="title">商品类型</view>
					<picker @change="PickerChange" :value="index" :range="pickercustom">
						<view class="picker" v-model="userdata.goodname" name="goodname" >
							  
							  {{index>-1?pickercustom[index]:'请选择商品类型'}}
						</view>
					</picker>
				</view>
				 <view class="cu-form-group">
				 	<view class="title from_width">商品名称</view>
				 	<input type="text" v-model="userdata.name" placeholder="请输入商品名称" name="name"></input>
				 </view>
				<view class="cu-form-group ">
					<view class="title  from_width">库存数量</view>
					<input type="number" v-model="userdata.num" placeholder="请输入库存数量" name="num"></input>
				</view>
				
				<view class="cu-form-group">
					<view class="title from_width">规格</view>
					<input type="text"  v-model="userdata.guige" placeholder="请输入规格" name="guige"></input>
				</view> 
				<view class="bg-white align-center">
					<view class="flex flex-wrap">
						<view class="basis-df padding">
							<button class="bg-blue xs text-lg" @tap="tj()">提交</button>
						</view>
						<view class="basis-df  padding">
							<button class="bg-blue xs text-lg" form-type="reset" refBtn>清空</button>
						</view>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import uu from "@/common/util.js";

	export default {
		data() {
			return {
				op_type: '',
				index: -1,
				pickercustom:[],
				pickerids:[],
				userdata: {
					id: '0',
					typeid:'',
					name: '',
					num: '0',
					guige: '', 
				}, 
			}
		},
		onLoad() { 
			this.getgoods(); 
		},
		onReady() { 
		},
		methods: {
			DateChange(e) {
				this.date = e.detail.value
			},
			PickerChange(e) {
				console.log(e.detail);
				this.index = e.detail.value;
				 
			},
			// 返回上一页
			onreturn() {
				 
			},
			backButton() {
				uni.navigateBack({
					delta: 1
				});
			},
			//录入出库记录
			tj() {
				var _self = this; 
				
				//验证是否选择 商品 
				if(this.index<0){
					 uni.showToast({
					 	title: '请选择商品类型！',
					 	icon: 'none'
					 });
					 return;
				}
				 
				uni.showLoading({
					title: '提交中...'
				})
				
				console.log(_self.pickerids[_self.index]);
				uniCloud.callFunction({
					name: "add_good",
					data: {
						typeid:_self.pickerids[_self.index],
						name:_self.userdata.name ,
						guige:_self.userdata.guige,
						num: parseInt(_self.userdata.num),
						sku:''
					}
				}).then((res) => {
					const {
						result
					} = res
					uni.showToast({
						title: '添加成功！',
						icon: "success"
					});
					 uni.hideLoading();
				}).fail((res)=>{
					uni.showToast({
						title: '添加失败！',
						icon: "none"
					});
					uni.hideLoading();
				});
				 
				_self.backButton();
			},
			clearForm() {
				//h5端可以 //翻源码得知的清空表单方法
				console.log('触发清空表单事件');
				this.$refs.refBtn.$dispatch('Form', 'uni-form-reset', {
					type: 'reset'
				})
			}, 
			//获取商品类型列表
			getgoods() {  
				var _self = this;
				_self.pickercustom=[]; 
				//读取云商品类型
			    uniCloud.callFunction({
			    	name: "get_goodtype", 
			    }).then((res) => {
			    	const {
			    		result
			    	} = res
					for (let i = 0; i < result.data.length; i++) {
							    var item = result.data[i];
								_self.pickercustom.push(item.typename);
								_self.pickerids.push(item.typecode);
					 }
					 
			    });
			},
			

		}
	}
</script>

<style>
	page {
		width: 100vw;
		position: relative;
		background-color: #fff;
	}

	.from_width {
		width: 200upx;
	}
</style>
